<style>
    .page {
        background: #273754;
    }
    .g-card-container {
        /* padding: 40upx;
		padding-top: 0; */
    }
    .g-card {
        border-radius: 4px 4px 0 0;
        background: linear-gradient(-45deg, #e9507a, #e85c67);
        padding: 30upx 30upx 20upx;
        color: #fff;
        position: relative;
		margin: 40upx;
        margin-bottom: 15px;
		z-index: 1;
    }

    .g-card::after {
        content: '';
        display: block;
        width: 106%;
        height: 2px;
        background: #2c2c2c;
        position: absolute;
        bottom: -2px;
        left: 0;
        transform: translateX(-3%);
    }

    .g-card-hd {
        display: flex;
        align-items: center;
    }

    .g-card-hd image {
        width: 82upx;
        height: 82upx;
        padding: 12upx;
        background: #fff;
        border-radius: 100px;
        margin-right: 10px;
    }

    .u-bank-name {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .u-bank-type {
        font-size: 12px;
    }

    .u-bank-num {
        font-size: 44upx;
        text-align: center;
        margin: 10px 0;
        text-shadow: 3px 1px 1px rgba(0, 0, 0, 0.4);
    }
	.u-bank-btns{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
    .g-btns {
        width: 48upx;
        height: 48upx;
		margin-left: 30upx;
    }

    .g-btns image {
        width: 100%;
		height: 100%;
    }
	.no-data {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32upx;
		color: #ffffff;
		background: rgba(0,0,0,.3);
		padding: 40upx;
		padding-left: 60upx;
		position: relative;
	}
	.no-data text{
		position: absolute;
		font-weight: bold;
		font-size: 60upx;
		top: 16upx;
		left: 20upx;
	}
</style>
<template>
    <view class="page">
        <view class="g-card-container">
            <!-- 银行卡 -->
            <view class="g-card" v-for="(item,index) in cardList" :key="index">
                <view class="g-card-hd">
                    <view>
                        <view class="u-bank-name">{{item.name}}</view>
                        <view class="u-bank-type">{{item.type}}</view>
                    </view>
                </view>
                <view class="u-bank-num">{{item.card_no}}</view>
				<view class="u-bank-btns">
					<button class="g-btns" @tap="edit" :data-id="item.id">
					    <image src="../../../../static/icons/user/edit3.png" mode="widthFix"></image>
					</button>
					<button class="g-btns" @tap="del" :data-id="item.id">
					    <image src="../../../../static/icons/user/delete2.png" mode="widthFix"></image>
					</button>
				</view>
            </view>
        </view>
		<view class="m-loading" v-if="isShowLoading">
		    <image src="../../../../static/images/loading.gif" mode="widthFix"></image>
		    <text>加载中</text>
		</view>
		<navigator open-type="navigate" class="no-data" v-if="isNoData" url="/pages/user/settings/bank_card/add_card">
			<view><text>+</text>添加银行卡</view><arrow size="40" color="#ccc" direction="right"></arrow>
		</navigator>
    </view>
</template>


<script>
	import henglang from '@/common/common.js';
    export default {
        data() {
            return {
				cardList:[],
				isShowLoading: false,
				cardInfo:{
					name: '',
					id:'',
					type: '',
					card_no: '',
					bank: '',
					branch: '',
					phone: '',
					isEdit: true
				},
				isNoData: false
            };
        },

        methods: {
            back() {
                uni.navigateBack();
            },
			// 获取银行卡列表
			getCardlist() {
				let that = this;
				that.isShowLoading = true;
				henglang.get('bank_card/index',{},true,function(res){
					if(res.data.code == 0){
						that.isShowLoading = false;
						that.cardList = res.data.data;
						that.isNoData = false;
					}else{
						that.isShowLoading = false;
						that.isNoData = true;
					}
				});
			},
			// 删除银行卡
			del(e) {
			    let that = this;
			    let id = e.currentTarget.dataset.id;
				henglang.post('bank_card/delete',{id: id},true,function(res){
					let origin = that.cardList;
					origin.forEach((item,index)=>{
					    if (item.id == id) {
					        origin.splice(index,1);
					    }
					})
					that.cardList = origin;
					henglang.showToast(res.data.msg,500);
					if(that.cardList.length === 0){
						that.isNoData = true;
					}
				});
			},
			// 编辑银行卡
			edit(e){
				let that = this;
				let id = e.currentTarget.dataset.id;
				let origin = that.cardList;
				origin.forEach((item,index)=>{
				    if (item.id == id) {
						that.cardInfo.name = item.name,
						that.cardInfo.id = item.id,
						that.cardInfo.type = item.type,
						that.cardInfo.card_no = item.card_no,
						that.cardInfo.bank = item.bank,
						that.cardInfo.branch = item.branch
						that.cardInfo.phone = item.phone
				    }
				})
				uni.navigateTo({
					url:`/pages/user/settings/bank_card/add_card?id=${that.cardInfo.id}&name=${that.cardInfo.name}&type=${that.cardInfo.type}&card_no=${that.cardInfo.card_no}&bank=${that.cardInfo.bank}&branch=${that.cardInfo.branch}&phone=${that.cardInfo.phone}&isedit=${that.cardInfo.isEdit}`
				})
			},
        },
		onShow() {
			let that = this;
			that.getCardlist();
		},
		onNavigationBarButtonTap() {
		    uni.navigateTo({
		    	url:'/pages/user/settings/bank_card/add_card'
		    })
		},
		
    }
</script>
